<template>
	<view>
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false" @touchstart="mpTouchstart" @touchend="mpTouchend">
			<swiper-item v-for="(list,index) in dataList" :key="index">
				<view v-if="Math.abs(k-index)<=1">
					<view>
						<video
						v-if="isShow"
						:id="list._id+''+index"
						:loop="true"
						muted="true"
						:src="list.src"
						:show-center-play-btn="false"
						:show-play-btn="false"
						>
						</video>

						<image
						v-if="!list.playIng"
						:src="list.src+'?x-oss-process=video/snapshot,t_100,f_jpg'"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute;'"
						mode="aspectFit"
						></image>
					</view>
					<!-- 播放状态：pause 的时候就会暂停 -->
					<view class="videoHover" @click="tapVideoHover(list.state,$event)" >
						<image v-if="list.state=='pause'" class="playState" src="@/static/img/index/play.png"></image>
					</view>
					<view class="userInfo">
						<!-- 1.头像 -->
						<image @click="tozuozhe" class="userAvatar" :src="list.href" mode="aspectFill"></image>
						<!-- 2.点赞 -->
						<view @click="cLike(list.like);" class="box">
							<image v-if="list.like" src="@/static/img/index/xin.png" style="width: 40px; height: 40px;"></image>
							<image v-if="!list.like" src="@/static/img/index/xin-2.png" style="width: 40px; height: 40px;"></image>
							<text style="color: #FFFFFF; font-size: 14px; text-align: center; font-weight: bold;" :class="{'likeNumActive':list.like}">{{list.like_n}}</text>
						</view>
						<!-- 3.评论 -->
						<view class="comment box"  >
							<image src="@/static/img/index/liaotian-2.png" style="width: 35px; height: 35px; position: absolute; right: 7px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{list.sms_n}}</text>
						</view>

						<view  class="box">
							<image src="@/static/img/index/share-fill.png" style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">0</text>
						</view>
					</view>

					<view class="content">
						<text class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text><!-- i={{i}} -->
						<text class="words" v-if="titleState" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.msg}}-{{k+1}}</text><!-- k={{k}} -->
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				model: "",
				deleteHeight: 0,
				dataList: [],
				k: 0,
				oldVideo: "",
				voice: "",
				timeout: "",
				current: 0,
				boxStyle:{//视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				videoID: "",
				isShow: false,
				showPlay: false,//转轮显示控制
				rotates: 0,//转轮旋转角度
				rotateTime: "",//转轮递归事件控制
				xrotats: "",
				mpcleartime: "",
				isClick: false,
				changeTimeout: "",
				mptime: 0,
				mpstartTime: 0,
				duration: 500,
				titleState:true
			}
		},
		components:{
			
		},
		watch:{
			async k(k,old_k){
				this.clearToTime();
				this.isShow = false
				this.dataList[old_k].playIng = false
				this.dataList[old_k].isplay = true
				this.dataList[old_k].state = 'pause'
				uni.createVideoContext(this.dataList[old_k]._id + '' + old_k,this).stop()
				this.dataList[k].state = 'play'
				this.isShow = true
				this.xrotats = setTimeout(()=>{
					this.showPlay = true;
					this.rotateX()
				},200)
				clearTimeout(this.changeTimeout);
				this.dataList[k].isplay = false
				setTimeout(()=>{
					this.dataList[k].playIng = true
				},250)
				if(this.mptime < 0.2){
					this.changeTimeout = setTimeout(()=>{
						uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play()
					},1400)
				} else {
					uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play()
				}
			}
		},
		onLoad() {
			this.platform = uni.getSystemInfoSync().platform
			this.model = uni.getSystemInfoSync().model
			var model = this.model
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
			this.boxStyle.height = this.windowHeight - this.deleteHeight;
			this.get()
			this.rotateX();
		},
		
		methods: {
			mpTouchend(){
				this.mptime = (new Date()/1000) - this.mpstartTime;
			},
			mpTouchstart(){
				this.mpstartTime = (new Date()/1000);
			},
			clearToTime(){
				//清理定时器
				for(let i=0;i<20;i++){
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
					this.showPlay = false;
					this.rotates = 0;
				}
			},
			clearTime(){
				//清理定时器
				for(let i=0;i<20;i++){
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
				}
			},
			rotateX(){
				this.rotateTime = setTimeout(()=>{
					this.rotateX();
					this.showPlay = true;
					this.rotates += 1;
				},30)
			},
			tapVideoHover(state,event){
				if(state=='play'||state=='continue'){
					this.dataList[this.k].state = 'pause';
				}else{
					this.dataList[this.k].state = 'continue';
				}
				if(this.dataList[this.k].state == 'continue'){
					this.isClick = true;
					this.dataList[this.k].playIng = true
					uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play();//暂停以后继续播放
					this.dataList[this.k].isplay = false
				}
				if(this.dataList[this.k].state == 'pause'){
					uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).pause();//暂停以后继续播放
					this.dataList[this.k].isplay = true
				}
			},
			change(event){
				this.k = event.detail.current
			},
			animationfinish(event){
				if(this.k == this.dataList.length - 1){
					this.GET()
				}
			},
			
			get(){
				uni.request({
					url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
					method: 'POST',
					data:{
						info: 'get_video'
					},
					success: (res) => {
						this.isShow = false;
						var msg = res.data.data
						for (let i = 0; i < msg.length; i++) {
							this.dataList.push(msg[i])
						}

						setTimeout(()=>{
							this.isShow = true;
							this.dataList[this.k].isplay = false
							this.dataList[this.k].state = 'play'
							this.dataList[this.k].playIng = true
							setTimeout(()=>{
								uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play()
							},500)
						},200)
						this.videoID = this.dataList[this.k]._id
					}
				})
			},
			cLike(sss){
				this.dataList[this.k].like = !this.dataList[this.k].like
				const video = this.dataList[this.k];
				sss?video.like_n -= 1:video.like_n += 1;
			},
			getobjec(e){
				console.log(e);
			}
		}
	}
</script>

<style>
	.container {background-color: #000000;}
	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}
	.videoHover{
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0,0,0,0.1);
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 95vh;
	}
	.playState{
		width:  160rpx;
		height: 160rpx;
		top: 50%;
		position: relative;
		    left: 50%;
		    transform: translate(-50%,-50%);
	}
	.userInfo{
		position: absolute;
		top:50%;
		transform: translate(-15%,-50%);
		right: 10px;
		flex-direction: column;
		
	}
	.userAvatar{
		border-radius: 500%;
		margin-bottom: 15px;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
	}
	.userAvatar{
		width : 100rpx;
		height: 100rpx;
	}
	.likeIco,.shareIco,.commentIco{
		width : 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}
	.likeNum,.commentNum,.shareTex{
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}
	.likeNumActive{
		color: red;
	}
	.content{
	  width: 620rpx;
	  z-index: 99;
	  position: absolute;
	  bottom: 70px;
	  /* justify-content: center; */
	  padding: 15rpx;
	  flex-direction: column;
	  justify-content: flex-start;
	  color: #ffffff;
	}
	.userName {
	  font-size: 30rpx;
	  color: #ffffff;
	  margin-top: 80upx;
	}
	.words {
	  margin-top: 10rpx;
	  font-size: 30rpx;
	  color: #ffffff;
	}
	.root{
		background-color: #000000;
	}
	.box{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 200rpx;
	}
	video{
		width: 100vw;
		height: 100vh;
	}

</style>
